<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <style>
    .bg {
      width: 300px;
      height: 300px;
      background-color: #f00;
    }
    .box {
      font-size: 28px;
    }
    .box2 {
      color: aqua;
    }
    .text-danger {
      color: red;
    }
  </style>
  <body>
    <div id="con">
      <div v-show="flag" class="bg">雷克萨讲道理看啥</div>
      <div v-if="flag" class="bg">雷克萨讲道理看啥</div>
      <!-- <input type="text" v-model="now" />
      全选：<input type="checkbox" v-model="allCheck" />
      <div v-for="item of lists">
        <input type="checkbox" v-model="item.status" />
      </div>
      <div>{{now}}</div>
      <button @click="fun">dianji</button> -->
      <!-- <input type="text" v-model="fname" />
      <input type="text" v-model="lname" />
      {{fullname}} -->

      <ul id="example-1">
        <li v-for="(item,index) in items" :key="index">{{ item.message }}</li>
      </ul>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#con',
      data: {
        items: [{ message: 'Foo' }, { message: 'Bar' }],
        flag: false,
        // boxStatus: true,
        // box2Status: true,
        // lists: [],
        // num: 0,
        // str: '',
        // lists: [
        //   {
        //     status: false,
        //   },
        //   {
        //     status: false,
        //   },
        //   {
        //     status: false,
        //   },
        //   {
        //     status: false,
        //   },
        //   {
        //     status: false,
        //   },
        // ],
        // fname: '张',
        // lname: '三',
        // fullname: '',
      },
      //   watch: {
      //     fname: function (val) {
      //       console.log(val)
      //       this.fullname = val + this.lname
      //     },
      //     lname: function (val) {
      //       this.fullname = this.fname + this.lname
      //     },
      //   },
      //   created() {
      //     getList()
      //   },
      //   computed: {
      //     fullname: {
      //       get() {
      //         return this.fname + this.lname
      //       },
      //       set() {
      //         this.fullname = this.fname + this.lname
      //       },
      //     },
      //     now: function () {
      //       return Date.now()
      //     },
      //     allCheck: {
      //       get() {
      //         return this.lists.every((item) => item.status)
      //       },
      //       set(val) {
      //         this.lists.forEach((item) => (item.status = val))
      //       },
      //     },
      //     username: {
      //       get() {
      //         return 123
      //       },
      //       set(n) {
      //         console.log(n)
      //       },
      //     },
      //   },
      //   methods: {
      //     fun() {
      //       console.log(this.now)
      //     },
      //     getList() {
      //       ajax.then((res) => {
      //         this.lists = res.data
      //       })
      //     },
      //   },
    })
  </script>
</html>
